<style scoped lang="scss"></style>
<template>
  <div style="display: flex;flex-wrap: wrap;">
    <!-- <van-grid :column-num="4">
      <van-grid-item
        v-for="(item, index) in gordData"
        :key="item.id"
        :icon="item.pic"
        :text="item.departmentName"
        @click="goToPatientPage(item.id)"
      >
      </van-grid-item>
    </van-grid> -->
    <dl v-for="(item, index) in gordData" :key="item.id" @click="goToPatientPage(item.id)" style="width: 25%;align-content: center;text-align: center;height: 86px;">
      <dt>
        <!-- <img style="width: 28px;height: 28px;border-radius: 50%;" :src="item.pic" alt=""> -->
         <Image style="width: 28px;height: 28px;border-radius: 50%;" :src="item.pic" alt="" ></Image>
      </dt>
      <dd>
        <span>{{ item.departmentName }}</span>
      </dd>
    </dl>
  </div>
</template> 
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getgord } from '../../api'
import Image from '@/components/image/index.vue'

const gordData = ref()
const router = useRouter()

getgord().then((res) => {
  console.log(res,'getgordgetgordgetgordgetgordgetgordgetgord')
  gordData.value = res.data.result
  console.log(gordData.value, 'gordDatagordDatagordData')
})
const goToPatientPage = (id: any) => {
  localStorage.setItem('oid',id)
  router.push({ path: '/consultation', query: { departmentId: id } })
  console.log('ss');
}
</script>
